<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/5
  Time: 0:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>网上商城</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/reset.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/theme.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/global.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/web.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/base.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/activity_tab.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/bottom_rec.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/nice_select.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/order.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/swiper-3.3.1.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order/pages-weixinpay.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<div class="cart py-container">
    <!--主内容-->
    <div class="checkout py-container pay">
        <input type="hidden" id="orderNo" value="${map.out_trade_no}">
        <div class="checkout-tit">
            <h4 class="fl tit-txt">
          <span class="success-icon"></span
          ><span class="success-info"
            >订单提交成功，请您及时付款！订单号：${map.out_trade_no}</span>
            </h4>
            <span class="fr"
            ><em class="sui-lead">应付金额：</em><em class="orange money">￥${ map.total_fee }</em></span
            >
            <div class="clearfix"></div>
        </div>
        <div class="checkout-steps">
            <div class="fl weixin">微信支付</div>
            <div class="fl sao">
                <p class="red">请使用微信扫一扫。</p>
                <div class="fl code">
                    <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
                    <!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ":size="338"/> -->
                    <!--code_url为二维码地址，这里需要通过一个vue的组件【qriously】显示-->
                    <!--执行npm install vue-qriously下载组件-->
<%--                    <qriously :value="payObj.code_url" :size="338" />--%>
                    <div id="qrcode" style="width:400px;margin:0 auto;" align="right"></div>
                    <div class="saosao">
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> -->
        </div>
    </div>
</div>
<script>
    var out_trade_no = $("#orderNo").val();
    var timer1 = window.setInterval(() => {
        this.queryPayStatus(out_trade_no);
    }, 3000);
    $("#qrcode").qrcode({
        render: "canvas", //table方式
        width: 150, //宽度
        height: 150, //高度
        text: '${map.code_url}' //后台返回过来的数据
    });
    function queryPayStatus(orderNo) {
        $.ajax({
            url:"${pageContext.request.contextPath}/order/queryPayStatus",
            type:"get",
            data:{ orderNo: orderNo},
            dataType:"json",
            success:function (data) {
                if(data==2)
                {
                    //成功后清除定时器
                    window.clearInterval(timer1);
                    alert("支付成功");
                    window.location.href="http://localhost:8080/index";
                    return;
                }
            }
        })
    }


</script>
</body>
</html>
